<!-- 首页：工作计划安排卡片 -->
<template>
	<el-card header="工作计划安排">
		<div class="home-card-summary">
			<div class="home-card-summary-item">
				<div class="home-card-summary-item-count">{{ scheduleInfo.toMeCount }}</div>
				<div class="home-card-summary-item-title">分配给我</div>
			</div>
			<div class="home-card-summary-item">
				<div class="home-card-summary-item-count">{{ scheduleInfo.assignToTeamCount }}</div>
				<div class="home-card-summary-item-title">分配给我的团队</div>
			</div>
			<div class="home-card-summary-item">
				<div class="home-card-summary-item-count">{{ scheduleInfo.taskToDeadLineCount }}</div>
				<div class="home-card-summary-item-title">即将到期的任务</div>
			</div>
		</div>
		<ul class="home-card-list">
			<li v-for="(item, index) in scheduleInfo.list" :key="index" class="home-card-item">
				<RouterLink to="/" class="home-card-item-link">
					<div class="home-card-item-icon">
						<el-icon><List /></el-icon>
					</div>
					<div class="home-card-item-middle">{{ item.title }}</div>
					<div class="home-card-item-right">
						<el-text :type="themes[index % 3]">{{ item.date }}</el-text>
					</div>
				</RouterLink>
			</li>
		</ul>
	</el-card>
</template>
<style lang="scss">
.home-card-summary {
	display: flex;
	justify-content: space-between;
	&-item {
		display: flex;
		align-items: baseline;
	}
	&-item-count {
		font-size: 26px;
		margin-right: 5px;
	}
	&-item-title {
		font-size: 14px;
	}
}
</style>
<script lang="ts" setup>
import { reactive } from 'vue';

/**
 * 颜色数组
 */
const themes = ['primary', 'success', 'warning', 'info'];

/**
 * 工作计划安排
 */
interface ScheduleItem {
	title: String;
	date: String;
}

/**
 * 工作计划安排信息
 */
interface ScheduleInfo {
	/**
	 * 分配给我的数量
	 */
	toMeCount: Number;
	/**
	 * 分配给团队的数量
	 */
	assignToTeamCount: Number;
	/**
	 * 即将到期的任务数量
	 */
	taskToDeadLineCount: Number;
	/**
	 * 任务详情
	 */
	list: Array<ScheduleItem>;
}

const scheduleInfo = reactive<ScheduleInfo>({
	toMeCount: 5,
	assignToTeamCount: 15,
	taskToDeadLineCount: 10,
	list: [
		{
			title: '供应链集成计划与S&OP业务架构规划',
			date: '2024-05-11',
		},
		{
			title: '生产供应网络多级APS运营解决方案',
			date: '2024-05-11',
		},
		{
			title: '全球研发与生产协同网络计划框架',
			date: '2024-05-11',
		},
		{
			title: '全球生产供应网络SNP运营控制塔',
			date: '2024-05-11',
		},
		{
			title: '全球生产供应网络SNP运营控制塔',
			date: '2024-05-11',
		},
		{
			title: '生产供应网络多级APS运营解决方案',
			date: '2024-05-11',
		},
		{
			title: '全球生产供应网络SNP运营控制塔',
			date: '2024-05-11',
		},
		{
			title: '生产供应网络多级APS运营解决方案',
			date: '2024-05-11',
		},
	],
});
</script>
